<script setup>
const  props = defineProps(["menuArr"]);
const data = props.menuArr;

</script>
<template>
<div>
    <template v-for="(item, index) in data">
      <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
           情况一：有子集的情况：                         -->
      <el-sub-menu :key="index" :index="item.path" v-if="item.children.length > 0">
        <template #title>
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <myitem :menuArr="item.children"></myitem>
      </el-sub-menu>
      <!-- 情况二：没子集的情况 -->
      <el-menu-item  :index="item.path"  v-else>
        <i :class="item.icon"></i>
        <span >{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>